<template>
    <div class="main mainPadding ">
        <div class="max-w">
        <el-breadcrumb separator=">" style="padding-top:20px;">
            <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" :key="i">{{ item.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="ad-view" style="margin-top:20px;">
            <img src="~@/assets/img/ad3.png" alt="" class="ad-img">
        </div>
        <div style="margin-top:20px;"> 
            <el-row :gutter="20">
                <el-col :span="5">
                    <div class="back-fff border-r6 shadow-1 flex-d flex-j-c flex-align" style="height:280px ;">
                        <div class="usertx shadow-1">
                            <img src="https://pic3.zhimg.com/v2-f66f66a6c300fef9c3ad6304baf234de_720w.webp?source=d6434cab" alt="">
                        </div>
                        <div class="userName MarT">{{ form.name||'--' }}</div>
                        <div class="userhy MarT">会员等级{{ form.vip}}</div>
                        <div class="uservip MarT35" v-if="form.vip==0">
                            您还未加入VIP
                            <span class="cursor-p" @click="goVip">立即加入</span>
                        </div>
                    </div>
                    <div class="back-fff border-r6 shadow-1 flex flex-j-c" style="height:714px ;overflow-y: auto;margin-top:20px;padding-top:35px;">
                        <div style="width:50%;">
                            <el-menu
                            default-active="1"
                            class="el-menu-vertical-demo"
                            :default-openeds=defaultOpeneds
                            @click="handle"
                            active-text-color="#d00b00"
                        >
                            <el-sub-menu index="1">
                                <template #title>
                                    <span>上传资源</span>
                                </template>
                                <el-menu-item index="1-1" data-tag='1-1'>我的上传</el-menu-item>
                                <el-menu-item index="1-2" data-tag='1-2'>我的下载</el-menu-item>
                                <el-menu-item index="1-3" data-tag='1-3'>我的收藏</el-menu-item>
                                <el-menu-item index="1-4" data-tag='1-4'>最近浏览</el-menu-item>
                            </el-sub-menu>
                            <el-menu-item index="2" data-tag="2">会员中心</el-menu-item>
                            <el-menu-item index="3" data-tag="3">我的账号</el-menu-item>
                            <el-menu-item index="6" data-tag="6">创作中心</el-menu-item>
                            <el-menu-item index="5" data-tag="5">研判定制</el-menu-item>
                            <el-menu-item index="4" data-tag="4">拓展服务</el-menu-item>
                            <el-menu-item index="7" data-tag='7'>我的投票</el-menu-item>
                        </el-menu>
                        </div>
                        
                    </div>
                </el-col>
                <el-col :span="19">
                    <Card1 :title="title" >
                        <template v-slot:main>
                            <!-- 上传资源 -->
                            <div v-if="dataTag == '1-1'" style="height:932px;">
                                <uploadlist1></uploadlist1>
                            </div>
                            <div v-if="dataTag == '1-2'" style="height:932px;">
                                <uploadlist2></uploadlist2>
                            </div>
                            <div v-if="dataTag == '1-3'" style="height:932px;">
                                <uploadlist3></uploadlist3>
                            </div>
                            <div v-if="dataTag == '1-4'" style="height:932px;">
                                <uploadlist4></uploadlist4>
                            </div>
                            <!-- 会员中心 -->
                            <div v-if="dataTag == '2'" style="min-height:932px ;">
                                <user />
                            </div>
                            <div v-if="dataTag == '3'" style="min-height:932px ;">
                                <number />
                            </div>
                            <div v-if="dataTag == '4'" style="min-height:932px ;">
                                <expand />
                            </div>
                            <div v-if="dataTag == '5'" style="min-height:932px ;">
                                <studyjudge />
                            </div>
                            <div v-if="dataTag == '6'" style="min-height:932px ;">
                                <create />
                            </div>
                            <div v-if="dataTag == '7'" style="min-height:932px ;">
                                <vote />
                            </div>
                        </template>
                    </Card1>
                </el-col>
            </el-row>
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="登录提示"
            width="30%"
            :before-close="handleClose"
        >
            <span>请先登录</span>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="btn1">取消</el-button>
                <el-button type="primary" @click="btn2">
                确认
                </el-button>
            </span>
            </template>
        </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRouter,useRoute  } from "vue-router";
import { ArrowRight } from '@element-plus/icons-vue'
import Card1 from '../components/card1.vue';
import uploadlist1 from './upload/a1.vue';
import uploadlist2 from './upload/a2.vue';
import uploadlist3 from './upload/a3.vue';
import uploadlist4 from './upload/a4.vue';
import user from './member/index.vue';
import number from './mNumber/info.vue';
import expand from './expand/index.vue';
import studyjudge from './studyjudge/index.vue';
import create from './create/index.vue';
import vote from './vote.vue';
const Router = useRouter();
const route = useRoute();
import { useStore } from 'vuex';
const store = new useStore();
const loading = ref(false)
const dialogVisible = ref(false)
    // console.log(Router.currentRoute.value.query.path)
    const breadcrumb_list = [{name:'首页'},{name:'个人中心'}]
    const dataTag =  ref('1-1')
    const title = ref('我的上传')
    const setpage = ()=>{
        if(Router.currentRoute.value.query.path == 'vip'){
            dataTag.value = '2'
            title.value = '会员中心'
        }
    }
    setpage()
    const handle=(e)=>{
        if(e.target.innerText != '上传资源'){
            title.value = e.target.innerText
            dataTag.value = e.target.dataset.tag
        }
    }
    const form = ref({})
    // 个人信息
    const loginData = JSON.parse(localStorage.getItem( 'loginData' ))
    const getUserInfo=()=>{
        if(loginData){
            form.value = JSON.parse(localStorage.getItem( 'user' ))
        }else{
            dialogVisible.value = true
        }
        
    }
    getUserInfo()
    const btn1=()=>{
        dialogVisible.value = false
        var c = []
        proxy.$http.request(proxy.$api.list_nav,'get',{},false, function (res) {
        if(res&&res.data){
           c =  res.data.data.list[0].children
        }
        })
        const ob = CryptoJS.AES.encrypt(JSON.stringify(c),'children').toString();
        Router.push({
            path:'/',
            query:{
                ob:ob
            }
        });
    }
    const btn2=()=>{
        dialogVisible.value = false
        Router.push('/login');
    }
    const goVip=()=>{
        title.value = '会员中心'
        dataTag.value = '2'
    }
    const defaultOpeneds = ['1']
    const list1 =[
        {title:'现代企业创新1',img: 'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新2',img:'https://www.cnr.cn/2022/images/xingzhen0620/sichuan.jpg'},
        {title:'现代企业创新3现代企业创新3',img:'https://www.cnr.cn/2022/images/xingzhen0620/shanxisan.jpg'},
        {title:'现代企业创新4',img:'https://www.cnr.cn/2022/images/xingzhen0620/qinghai.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新1',img: 'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新2',img:'https://www.cnr.cn/2022/images/xingzhen0620/sichuan.jpg'},
        {title:'现代企业创新3现代企业创新3',img:'https://www.cnr.cn/2022/images/xingzhen0620/shanxisan.jpg'},
        {title:'现代企业创新4',img:'https://www.cnr.cn/2022/images/xingzhen0620/qinghai.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
        {title:'现代企业创新5',img:'https://www.cnr.cn/2022/images/xingzhen0620/ningxia.jpg'},
    ]
    
</script>

<style lang='less' scoped>
/deep/.avatar-uploader .el-upload{
    border: none;
    background: #fff;
}
.el-menu-vertical-demo{
    border-right:0;
}
.usertx{
    height: 88px;
    width: 88px;
    border-radius: 50%;
    overflow: hidden;
}
.userName{
    font-size: 23px;
    font-weight: bold;
}
.userhy{
    font-size: 15px;
    font-weight: bold;
}
.uservip{
    font-size: 13px;
    color:#8d8d8d;
    span{
        color: #d00b00;
    }
}

.subscribe{
    width: 25%;
    padding: 14px;
    .item{
        border-radius: 30px;
        border:1px solid #e9e9e9;
        color: #333;
        font-size: 16px;
        height: 55px;
        line-height: 55px;
        cursor: pointer;
        text-align: center;
    }
    .active{
        background: #d00b00;
        color: #fff;
    }
}
/deep/ .el-input--large .el-input__wrapper{
    padding: 0 0px;
    background:#f6f7f9;
    
}
/deep/ .el-textarea__inner{
    background:#f6f7f9;
    padding: 10px 10px;
}
/deep/.el-input--large .el-input__inner{
    padding:0 10px;
}
</style>
